<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#canvas-warpper{
				width: 1200px;
				height: 800px;
				position: relative;
				margin: 50px auto;
			}
			#canvas{
				border: 2px solid red;
				
			}
			#controller{
				position: absolute;
				top: 30px;
				left: 30px;
				background-color: rgba(0,85,115,0.7);
				padding: 5px 20px 25px 20px;
				border-radius: 10px 10px;
			}
			#controller h1{
				color: white;
				font-weight: bold;
				font-family: "microsoft yahei";
			}
			#controller #canvas-btn{
				display: inline-block;
				background-color: #8b0;
				color: white;
				font-size: 14px;
				padding: 5px 15px;
				border-radius: 6px 6px;
				text-decoration: none;
				margin-top: 10px;
				margin-right: 20px;
			}
			#controller #canvas-btn:hover{
				text-decoration: none;
				background-color: #7a0;
			}
			#controller .color-btn{
				display: inline-block;
				padding: 5px 15px;
				border-radius: 6px 6px;
				font-size: 14px;
				margin-top: 10px;
				margin-right: 5px;
				text-decoration: none;
			}
			#controller .color-btn:hover{
				text-decoration: none;
			}
			#controller #white-color-btn{
				background-color: white;
			}
			#controller #black-color-btn{
				background-color: black;
			}
		</style>
	</head>
	<div id="canvas-warpper">
			<canvas id="canvas">当前浏览器不支持canvas,请更换浏览器（canvas默认背景还是白色，如果将html置于canvas前面会被遮挡）</canvas>
			<div id="controller">
				<h1>vanvas绘图</h1>
				<a href="#" id="canvas-btn">停止运动</a>
				<a href="#" class="color-btn" id="white-color-btn">&nbsp;</a>
				<a href="#" class="color-btn" id="black-color-btn">&nbsp;</a>
			</div>
		</div>
	<body>
		
	<script>
		var balls=[];
		var isMoving =true;
		var themeColor = "white";
		//
		var canvas =document.getElementById("canvas");
		canvas.width =1000;
		canvas.height=800;
		var context =canvas.getContext("2d");
		for (var i=0;i<88;i++) {
			var R = Math.floor(Math.random()*255);
			var G = Math.floor(Math.random()*255);
			var B = Math.floor(Math.random()*255);
			var radius = Math.random()*50+20;
			aBall ={
				color:"rgb("+R+","+G+","+B+")",
				radius:radius,
				x:Math.random()*(canvas.width-2*radius)+radius,
				y:Math.random()*(canvas.height-2*radius)+radius,
				vx:(Math.random()*5+5)*Math.pow(-1,Math.floor(Math.random()*100)),
				vy:(Math.random()*5+5)*Math.pow(-1,Math.floor(Math.random()*100))
			}
			balls[i] = aBall;
		}
		//初始化
		setInterval(
			function(){
					draw(context);
					update(canvas.width,canvas.height);		
			},50
		);
		//点击事件
		document.getElementById("canvas-btn").onclick =function(event){
			if(isMoving){
				isMoving =false;
				this.text ="开始运动";
			}else{
				isMoving="true";
				this.text="停止运动";
			}
			return false;
		};
		document.getElementById("white-color-btn").onclick=function(){
			themeColor="white";
			return false;
		};
		document.getElementById("black-color-btn").onclick =function(){
			themeColor ="black";
			return false;
		};
		
		//画圆
		function draw(cxt){
			var canvas = cxt.canvas;
			cxt.clearRect(0,0,canvas.width,canvas.height);//清空
			if(themeColor=="black"){
				//console.log("black");
				cxt.fillStyle="black";
				cxt.fillRect(0,0,canvas.width,canvas.height);
			}
			for (var i=0;i<balls.length;i++) {
				cxt.fillStyle=balls[i].color;
				cxt.beginPath();
				cxt.arc(balls[i].x,balls[i].y,balls[i].radius,0,Math.PI*2);
				cxt.closePath();
				cxt.fill();
			}
		}
	//碰撞检测
			function update(canvasWidth,canvasHeight){
				if(isMoving){
						 for (var i = 0; i < balls.length; i++) {
               balls[i].x += balls[i].vx;
               balls[i].y += balls[i].vy;
               if (balls[i].x - balls[i].radius <= 0) {
                   balls[i].vx = -balls[i].vx;
                   balls[i].x = balls[i].radius;
               }
               if (balls[i].x + balls[i].radius >= canvasWidth) {
                   balls[i].vx = -balls[i].vx;
                   balls[i].x = canvasWidth - balls[i].radius;
               }
               if (balls[i].y - balls[i].radius <= 0) {
                   balls[i].vy = -balls[i].vy;
                   balls[i].y = balls[i].radius;
               }
               if (balls[i].y + balls[i].radius >= canvasHeight) {
                   balls[i].vy = -balls[i].vy;
                   balls[i].y = canvasHeight - balls[i].radius;
               }
           }
				
				}else{
					balls[i].x = balls[i].x;
					balls[i].y = balls[i].y;
					
					
				}
			}
			
			
	</script>
</html>
